<template>
  <div>
    <el-date-picker
      v-if="type !== 'quarter'"
      v-model="time"
      :type="type"
      :placeholder="placeholder"
      :size="size"
      :clearable="clearable"
      :value-format="valueFormats"
      :format="vFormat"
      :disabled="disabled"
      :picker-options="pickerOptions"
      unlink-panels
      :default-value="defaultValue"
      :default-time="defaultTime"
      range-separator="/"
      :start-placeholder="$t('开始日期')"
      :end-placeholder="$t('结束日期')"
      @change="$emit('change', time)"
    />
    <quarter-range-picker v-if="type === 'quarter'" style="width: 100%" :clearable="false" :value="time" @on-change="onChange" />
  </div>
</template>

<script>
// import QuarterPicker from '@/components/DatePicker/quarter'
import quarterRangePicker from './quarter-range-picker/index.vue'
export default {
  name: 'DatePicker',
  components: { quarterRangePicker },
  props: {
    value: {
      type: [String, Array, Date],
      default: ''
    },
    defaultValue: {
      type: Date,
      default: () => new Date()
    },
    type: {
      type: String,
      default: 'date'
    },
    format: {
      type: String,
      default: ''
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    size: {
      type: String,
      default: () => ''
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    pickOptions: {
      type: Object,
      default: () => {}
    },
    defaultTime: {
      type: [String, Array],
      default: undefined
    }
  },
  data() {
    return {
      time: '',
      vFormat: '',
      valueFormats: '',
      pickerOptions: {
        shortcuts: []
      },
      latelyOptions: {
        shortcuts: [
          {
            text: this.$t('今天'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('昨天'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('一周前'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      weekOptions: {
        shortcuts: [{
          text: this.$t('最近一周'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: this.$t('最近一个月'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: this.$t('最近三个月'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      quarter: []
    }
  },
  watch: {
    type: {
      handler(val) {
        if (val === 'date') {
          this.valueFormats = 'yyyy-MM-dd'
          if (this.format) {
            this.vFormat = this.format
          } else {
            this.vFormat = 'yyyy-MM-dd'
          }
          if (this.pickOptions) {
            this.pickerOptions = this.pickOptions
          } else {
            this.pickerOptions = this.latelyOptions
          }
        } else if (val === 'daterange') {
          this.valueFormats = 'yyyy-MM-dd'
          this.vFormat = 'yyyy-MM-dd'
          this.pickerOptions = this.weekOptions
        } else if (val === 'week') {
          this.pickerOptions = { firstDayOfWeek: 1 }
          this.vFormat = this.format
        } else if (val === 'year') {
          this.valueFormats = 'yyyy'
          this.vFormat = 'yyyy'
          this.pickerOptions = {}
        } else if (val === 'datetimerange') {
          this.valueFormats = 'yyyy-MM-dd HH:mm'
          this.vFormat = 'yyyy-MM-dd HH:mm'
          this.pickerOptions = this.weekOptions
        } else {
          this.pickerOptions = {}
        }
      },
      deep: true,
      immediate: true
    },
    value: {
      handler(val) {
        this.time = val
      },
      deep: true,
      immediate: true
    },
    time: {
      handler() {
        this.$emit('input', this.time)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    onChange(e) {
      if (e) {
        this.time = [e[0].start_date, e[1].end_date]
        this.$emit('change', [e[0].start_date, e[1].end_date])
      } else {
        this.time = []
        this.$emit('change', [])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.quarter-picker__options{
  grid-template-columns:repeat(2, 1fr)
}
/deep/.el-range-separator {
  width: 40px;
}
/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: auto !important;
}
</style>
